import React, { memo } from 'react';
import { SearchDjradioWrapper, ContentWrapper,ItemWrapper } from './style';
import { formatImg } from '@/utils/format'
import useShowRadioDetail from '@/hooks/useShowRadioDetail'
export default memo(function SearchDjradio(props) {
  const { list } = props
  const goToRadioDetail = useShowRadioDetail()
  return (
    <SearchDjradioWrapper>
      <h3 className='title'>声音主播</h3>
      <ContentWrapper>
        {
          list.map(item => {
            return (
              <ItemWrapper key={item.id} isMan={item.dj?.gender+'' === 1+''}>
                <img src={formatImg(item.picUrl, 150)} alt="" onClick={e => goToRadioDetail(item.id)}/>
                <div className="name text-nowrap" onClick={e => goToRadioDetail(item.id)}>
                  <span className='link'>{item.name}</span>
                </div>
                <div className="creator text-nowrap">by <span className='link'>{item.dj?.nickname}</span> <i className='icon sprite_icon2'></i></div>
              </ItemWrapper>
            )
          })
        }
      </ContentWrapper>
    </SearchDjradioWrapper>
  )
});
